<template>
	<view>
		
		<view class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view>
			<u-popup :round="10" mode="top" :show="show_down" @close="closeDown" @open="openDown">
				<view class="pop">
					<view class="pop-title fz40 w100 txt_c">如何下载卡片</view>
					<view class="pop-content h150 flex flex_ac" style="margin-bottom: 55rpx;">
						<view class="pop-content-v1 fz30">抽中此卡片即可获得保存高清原图特权</view>
						<view class="pop-content-v2 fz30" @click="goChouka()">去抽卡</view>
					</view>
				</view>
			</u-popup>
			
			<u-popup :round="10" mode="top" :show="show_zhuli" @close="closeZhuli">
				<view class="pop">
					<view class="pop-title fz40 w100 txt_c">如何助力兑换</view>
					<view class="pop-content h150 flex flex_ac">
						<view class="pop-content-v1 fz30">每天最多可以邀请好友助力获取三张卡片,
						每个好友每天只能助力一次，邀请助力后请在24小时内完成，否则助力无效！</view>
						<button open-type="share" id="zhuli" @click="shareZhuli()" class="pop-content-v2 fz30">邀请助力</button>
					</view>
					<view class="w100 txt_c fz25 mt20 col_999">{{zhuli_list.length>0?'已助力好友':'暂无好友助力'}}</view>
					<view class="pop-content h150 flex flex_ac">
						<view class="pop-content-v1 fz30 flex" style="justify-content: space-around;">
							<view class="zhuli_icon">
								<image :src="zhuli_list.length>0?zhuli_list[0].be_avatar:'../../static/tabbar/me0.png'"></image>
							</view>
							
							<view class="zhuli_icon">
								<image :src="zhuli_list.length>1?zhuli_list[1].be_avatar:'../../static/tabbar/me0.png'"></image>
							</view>
							
							<view class="zhuli_icon">
								<image :src="zhuli_list.length>2?zhuli_list[2].be_avatar:'../../static/tabbar/me0.png'"></image>
							</view>
							
						</view>
						<view v-if="zhuli_list.length<3" class="pop-content-v2 fz30" style="background-color: #9d9d9d;">兑换</view>
						<view v-if="zhuli_list.length>2" class="pop-content-v2 fz30" @click="finishZhuli()">兑换</view>
					</view>
				</view>
			</u-popup>
			
			<u-popup :round="10" mode="center" :show="show_dan" @close="closeDan">
				<view class="pop2">
					<view class="display-danmu flex">
						<view class="w50 flex h100 flex_ac fz30 ml15">
							<u-icon name="eye"></u-icon>
							<view class="ml10">显示弹幕</view>
						</view>
						
						<view class="color w50 h100 flex flex_ac flex_jr mr20">
							<image  @click="opencolor" src="/static/images/colorful.png"></image>
						</view>
					</view>
					<view class="input pd0_10 mt20">
						 <u--input
						    placeholder="请输入弹幕内容"
						    border="surround"
						    v-model="danmu_value"
							:color="danmu_color"
						  ></u--input>
					</view>
					<view class="w100 flex flex_jc">
						<view class="send" @click="sendDanmu()">发送</view>
					</view>
				</view>
			</u-popup>
			
		</view>
		<view class="w100 flex flex_jc flex_wrap">
			<view class="main-img img">
				<u--image :showLoading="true" :src="kapai_info.card" width="100%" height="100%" mode="scaleToFill"></u--image>
			</view>
			<view class="danmu_box">
				<view :class="item.me?'danme_me':''" class="danmu fz30" style="position: absolute;" :style="{'top':item.height+'px','animation-duration':item.time+'s','color':item.color}" v-for="(item,index) in danmu_list">{{item.name}}</view>
			</view>
			<view class="e2 flex flex_jc flex_ac mt30">
				<view class="w100 flex flex_jc">
					<view @click="like()">
						<view class="img">
							<u--image v-if="!kapai_info.has_like" src="/static/images/detail_like0.png" width="100%" height="100%" mode="scaleToFill"></u--image>
							<u--image v-if="kapai_info.has_like" src="/static/images/detail_like1.png" width="100%" height="100%" mode="scaleToFill"></u--image>
						</view>
						<view v-if="!kapai_info.has_like" class="title fz25 col_999 txt_c">点赞</view>
						<view v-if="kapai_info.has_like" class="title fz25 col_999 txt_c">已点赞</view>
					</view>
					
				</view>
				 
				<view class="w100 flex flex_jc" @click="openDan()">
					<view>
						<view class="img">
							<u--image src="/static/images/danmu.png" width="100%" height="100%" mode="scaleToFill"></u--image>
						</view>
						<view class="title fz25 col_999 txt_c">弹幕</view>
					</view>
				</view>
				
				<view class="w100 flex flex_jc flex_wrap">
					<view>
						<view class="img" @click="openDown()">
							<u--image src="/static/images/down.png" width="100%" height="100%" mode="scaleToFill"></u--image>
						</view>
						<view class="title fz25 col_999 txt_c">下载</view>
					</view>
				</view>
				
				<view class="w100 flex flex_jc flex_wrap">
					<view @click="duihuan()">
						<view class="img">
							<u--image src="/static/images/QXvOLROo3Y.png" width="100%" height="100%" mode="scaleToFill"></u--image>
						</view>
						<view class="title fz25 col_999 txt_c">兑换</view>
					</view>
				</view>
			</view>
			<view class="share flex">
				<button type="default" id="share" open-type="share" @click="shareCard()">
					<view class="share-box">赠送给好友</view>
				</button>
				<button type="default" id="ask" open-type="share" @click="askCard()" >
					<view class="share-box">向好友索要</view>
				</button>
				
				<button type="default" @click="openZhuli()" >
					<view class="share-box">助力兑换</view>
				</button>
			</view>
		</view>
		<view class="t-page">
			 <!-- 需要声明 ref  -->
			<t-color-picker ref="colorPicker" :color="color" @confirm="confirm"></t-color-picker>
		</view>
		
		<u-modal :show="setting_show"
				content="检测到您没打开下载图片功能权限，是否去设置打开？" 
				@confirm="openSetting()"  
				@cancel="closeSetting()"
				showCancelButton="true"
				></u-modal>
		
	</view>
	
</template>

<script>
	import {getKapaiDetail,like,saveDanmu,
		duihuan,askCard,shareCard,finishZhuli,
		getZhuliStatus,shareZhuli} from "@/api/api"
	import {randomString} from "@/utils/common.js"
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	import adSdk from "@/utils/advertise.js"
	export default {
		 components: {
			tColorPicker
		},
		data() {
			return {
				user_id:uni.getStorageSync('user_id')?uni.getStorageSync('user_id'):0,
				color: {r: 255,g: 0,b: 0,a: 0.6},
				show_down:false,
				show_zhuli:false,
				show_dan:false,
				danmu_value:'',
				danmu_color:'#303133',
				kapai_id:0,
				is_like:0,
				maxheight:0,
				kapai_info:[],
				danmu_list:[],
				is_login:false,
				userinfo:[],
				sharecode:'',
				setting_show:false,
				zhuli_list:[],
				_windowWidth:getApp().globalData._windowWidth,
				_windowHeight:getApp().globalData._windowHeight,
				
			}
		},
		
		
		onLoad: function (option) {
			this.kapai_id = option.id
			this.getKapaiDetail()
			// this.danmu()
		},
		
		onShow:function(){
			
			adSdk.initInterstitial(this.xcx_ad.interstitialId)
			adSdk.showInterstitial()
			
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
			this.userinfo = uni.getStorageSync('userinfo')
			this.sharecode = randomString(8);
			console.log(this.sharecode)
		},
		
		onShareAppMessage(e) {
			if(e.from=='button'){
				if(e.target.id=='share'){
					var index = e.target.dataset.index
					return {
						title: '您的好友给您赠送卡片啦',
						path: "/pages/share_card/index?card_id="+this.kapai_id+'&share_user_id='+this.userinfo.id+'&type=share&code='+this.sharecode,
						imageUrl:this.kapai_info.card,
					}
				}else if(e.target.id=='zhuli'){
						return {
							title: '您的好友需要您的助力',
							path: "/pages/share_card/index?card_id="+this.kapai_id+'&share_user_id='+this.userinfo.id+'&type=zhuli&code='+this.sharecode,
							imageUrl:this.kapai_info.card,
						}
				}else{
					return {
						title: '您的好友向您索要卡片',
						path: "/pages/share_card/index?card_id="+this.kapai_id+'&share_user_id='+this.userinfo.id+'&type=ask&code='+this.sharecode,
						imageUrl:this.kapai_info.card,
					}
				}
			}
			else{
				return {
					path: "/pages/kapai_detail/index?id="+this.kapai_id,
					imageUrl:this.kapai_info.card,
				}
			}
		   
		},
		onShareTimeline(e) {
			if(e.from=='button'){
				if(e.target.id=='share'){
					var index = e.target.dataset.index
					return {
						title: '您的好友给您赠送卡片啦',
						path: "/pages/share_card/index?card_id="+this.kapai_id+'&share_user_id='+this.userinfo.id+'&type=share&code='+this.sharecode,
						imageUrl:this.kapai_info.card,
					}
				}else if(e.target.id=='zhuli'){
					return {
						title: '您的好友需要您的助力',
						path: "/pages/share_card/index?card_id="+this.kapai_id+'&share_user_id='+this.userinfo.id+'&type=zhuli&code='+this.sharecode,
						imageUrl:this.kapai_info.card,
					}
				}else{
					return {
						title: '您的好友向您索要卡片',
						path: "/pages/share_card/index?card_id="+this.kapai_id+'&share_user_id='+this.userinfo.id+'&type=ask&code='+this.sharecode,
						imageUrl:this.kapai_info.card,
					}
				}
			}
			else{
				return {
					path: "/pages/kapai_detail/index?id="+this.kapai_id,
					imageUrl:this.kapai_info.card,
				}
			}
		},
	
		methods:{
			getKapaiDetail(){
				getKapaiDetail(this.kapai_id).then(res=>{
					console.log(res)
					if(res.code==0){
						this.kapai_info = res.data
						var danmu_list = res.data.danmu
						this.$nextTick(()=>{
							let dom = uni.createSelectorQuery().select(".danmu_box");
							dom.boundingClientRect((data)=> {
								for(var i = 0;i<danmu_list.length;i++){
									this.maxheight = Math.floor(data.height)
									let h = Math.floor(Math.random()*this.maxheight)
									let t = Math.floor(Math.random()*5)+3
									let me = this.user_id == danmu_list[i].user_id?1:0
									this.danmu_list.push({
										name:danmu_list[i].value,
										color:danmu_list[i].color,
										height:h,
										time:t,
										me:me
									})
								}
							}).exec()
						})
						
					}else{
						this.msg(res.msg)
					}
				})
			},
			
			shareZhuli(){
				shareZhuli(this.kapai_id,this.sharecode).then(res=>{
				
				})
			},
			
			shareCard(){
				shareCard(this.kapai_id,this.sharecode).then(res=>{
				
				})
			},
			askCard(){
				askCard(this.kapai_id,this.sharecode).then(res=>{
				
				})
			},
			//完成助力兑换
			finishZhuli(){
				var that = this
				finishZhuli(that.kapai_id).then(res=>{
					if(res.code==0){
						that.msg(res.msg)
						setTimeout(function () {
						  that.closeZhuli()
						}, 1000);
						
					}else{
						that.msg(res.msg)
					}
				})
			},
			
			duihuan(){
				var that = this
				if(this.isLogin()){
					uni.showModal({
						title: '提示',
						content: '确认花费30光能量兑换此卡片吗？',
						cancelText: "考虑一下", // 取消按钮的文字  
						confirmText: "确认兑换", // 确认按钮文字 
						confirmColor:'#F54E40',//确认字体的颜色
						cancelColor:'#000',//取消字体的颜色
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								duihuan(that.kapai_id).then(res=>{
									if(res.code==0){
										that.userinfo.power = res.data
										uni.setStorageSync('userinfo',that.userinfo)
										that.msg(res.msg)
									}else{
										that.msg(res.msg)
									}
								
								})
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				
	
			},
			
			like(){
				like(this.kapai_id,'kapai').then(res=>{
					if(res.code==0){
						this.kapai_info.has_like = res.data.has_like
						this.msg(res.msg)
					}else{
						this.msg(res.msg)
					}
				
				})
			},
			
			sendDanmu(){
				var that = this
				var data = {
					value:that.danmu_value,
					color:that.danmu_color,
					kapai_id:that.kapai_id,
					
				}
				saveDanmu(data).then(res=>{
					if(res.code==0){
						let h = Math.floor(Math.random()*that.maxheight)
						let t = Math.floor(Math.random()*5)+3
						that.danmu_list.push({
							height:h,
							me:1,
							time:t,
							name:that.danmu_value,
							color:that.danmu_color
						})
						that.msg('发送成功')
						setTimeout(function () {
						  that.closeDan()
						}, 500);
						
					}else{
						that.msg(res.msg)
					}
				})
				
			},
			
			// saveDanmu(data){
			// 	saveDanmu(data).then(res=>{
			// 		if(res.code==0){
						
			// 		}
			// 		console.log(res)
			// 	})
			// },
		
			opencolor(item) {
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			confirm(e) {
				console.log(e)
				console.log('颜色选择器返回值：'+ e)
				this.danmu_color = e.hex
			},
			
			danmu(){
				this.$nextTick(()=>{
					let dom = uni.createSelectorQuery().select(".danmu_box");
					dom.boundingClientRect((data)=> {
						for(var i = 0;i<this.danmu_list.length;i++){
							this.maxheight = Math.floor(data.height)
							let h = Math.floor(Math.random()*this.maxheight)
							let t = Math.floor(Math.random()*5)+3
							this.danmu_list[i].height = h
							this.danmu_list[i].time = t
						}
						console.log(this.danmu_list)
					}).exec()
				})
			},
			
			// 4.打开设置
			openSetting(){
				const that = this;
				uni.openSetting({
					success: (res) => {
						console.log("打开设置成功", res);
						if (res.authSetting['scope.writePhotosAlbum']) {
							console.log('成功授权writePhotosAlbum')
							// 5.用户在设置中点击了允许，调用选择位置信息函数
							that.setting_show = false
							that.downPic()
						} else {
							console.log('用户未授权writePhotosAlbum')
							// 5.用户在设置中点击了不允许，展示拒绝授权信息
							that.msg('你拒绝了授权，无法操作内容')
							setTimeout(function () {
								that.setting_show = false
							}, 1500);
						
						}
					},
					fail: (err) => {
						console.log("打开设置失败", err)
					}
				})
			},
			closeSetting(){
				console.log('closeSetting')
				this.setting_show = false
			},
			
			openDown() {
				if(this.kapai_info.kapai_count>0){
					var that = this
					
					uni.getSetting({
						success: res => {
							console.log('用户权限列表:', res.authSetting)
							if (res.authSetting['scope.writePhotosAlbum']) {
								console.log('已授权writePhotosAlbum')
								that.downPic()
								
							}else{
								console.log('用户未授权writePhotosAlbum')
								//2.用户第一次进来发起授权
								uni.authorize({
									scope: 'scope.writePhotosAlbum', 
									success: (res1) => {
										console.log("允许授权", res1);
										// 3.如果用户点击了允许，下载图片
										that.downPic()
									},
									fail: (err1) => {
										console.log("拒绝授权", err1);
										// 3.如果用户点击了拒绝或者用户之前点击过拒绝授权，打开用户设置模态框
										that.setting_show = true;
									},
								})
							}
						}
					})
					
					
				}else{
					this.show_down = true
				}
				
			},
			
			downPic(){
				uni.downloadFile({
					url: this.kapai_info.card,
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function () {
									that.msg('保存成功')
									
								},
								fail: function () {
									that.msg('保存失败')
								}
							});
						}
					}
				})
			},
			
			closeZhuli() {
				this.show_zhuli = false
			},
			openZhuli() {
				if(this.isLogin()){
					//获取助力情况
					getZhuliStatus(this.kapai_id).then(res=>{
						if(res.code==0){
							console.log(res)
							this.zhuli_list = res.data.list
							this.show_zhuli = true
						}
					
					})
				}
			},
			
			closeDown() {
				this.show_down = false
			},
			openDan() {
				if(this.isLogin()){
					this.show_dan = true
				}
			},
			closeDan() {
				this.show_dan = false
			},
			goChouka(){
				if(this.isLogin()){
					uni.navigateTo({
						url: '/pages/choujiang/index',
					}); 
				}
			},
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
			isLogin(){
				if(this.is_login){
					return true
				}else{
					//登录
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
			},
			
		}
	}
</script>
<style>
	.img .u-transition{width: 100%;height: 100%;}
	.t-box{z-index: 666666666;}
	button::after{
	 	border: none;
	}
	button{
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 200rpx;
		height: 100%;
		}
</style>
<style scoped>
	.zhuli_icon image{width: 100%;height: 100%;}
	.zhuli_icon{width: 100rpx;height: 100rpx;border-radius: 100%;overflow: hidden;}
	.share-box{height: 60rpx;line-height: 60rpx;background-color: #0066ff;color: #FFFFFF;text-align: center;
		font-size: 30rpx;border-radius: 10rpx;margin: 20rpx 0;}
	.share{justify-content: space-between;width: 710rpx;}
	
	.t-page{z-index: 1000076;}
	.pop2 .color image{width: 50rpx;height: 50rpx;}
	.pop2 .send{width: 200rpx;height: 60rpx;border-radius: 10rpx;line-height: 60rpx;text-align: center;font-size: 30rpx;background-color: #0066ff;margin-top: 20rpx;color: #FFFFFF;font-weight: bold;}
	.pop2{height: 350rpx;border: 20rpx solid #0066ff;border-radius: 10rpx;width: 450rpx;}
	
	.pop-content-v2{width: 150rpx;height: 80rpx;background-color: #0066ff;color: #FFFFFF;line-height: 80rpx;text-align: center;}
	.pop-content-v1{width: 400rpx;padding: 0 20rpx;color: #0066ff;}
	.pop-content{background-color: #F8F8F8;width: 600rpx;margin-left: 55rpx;margin-top: 20rpx;}
	.pop-title{font-weight: bold;height: 80rpx;line-height: 80rpx;}
	.pop{background-color: #FFFFFF;border-bottom:20rpx solid #0066ff;border-left:20rpx solid #0066ff;border-right:20rpx solid #0066ff;}
	.e2 .img{width: 80rpx;height: 80rpx;}
	.e2{width: 600rpx;}
	.main-img{width: 100%;height: 1090rpx;}
	.danme_me{padding: 10rpx;border: 1px solid #0066ff;}
	.danmu{animation:barrage 5s linear infinite;white-space:nowrap;}
	.danmu_box{width: 100%;height: 1090rpx;position: absolute;}
	 @keyframes barrage{
	 
	    from{
	 
	      left:100%;
	 
	      transform:translateX(0);
	 
	    }
	 
	    to{
	 
	      left:0;
	 
	      transform:translateX(-100%);
	 
	    }
	 
	 }
	 
	
</style>